<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>

    const obox = document.querySelector(".box");
    
    // 加速
    // let speed = 1;
    const target = 500;
    let t;

    document.onclick = function(){
        move(obox, "left", function(){
            move(obox, "top", ()=>{
                move(obox, "width")
            });
        })
    }


    function move(ele, attr, cb){
        clearInterval(t);
        t = setInterval(() => {
            // 加速
            // speed++;
            let now = ele["offset" + attr.slice(0,1).toUpperCase() + attr.slice(1)];
            
            let speed = (target - now)/10;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            // console.log(speed)
            // 加速
            // if(target-now < speed){
            // 减速
            if(target === now){
                clearInterval(t);
                cb && cb();
                // 加速
                // obox.style.left = target + "px"
            }else{
                now += speed;
                ele.style[attr] = now + "px"
            }
        }, 30);
    }



    // 函数的防抖和节流

</script>
</html>